<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link href="css/huikuanjihua.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<style>
</style>
</head>

<body class="bg-lightbule modal-open" style="padding-right: 16px;">

	<!--vue的div开始-->
	<div class="boxhuikuan">

		<div tabindex="-1" class="modal fade in" id="popshow_container"
			role="dialog" aria-hidden="true" aria-labelledby="myModalLabel"
			style="display: block; z-index: 1052;">
			<div class="modal-dialog modal-xg"
				style="margin: 0; padding: 0; background: #fff;">
				<div class="modal-content" id="popshow_container_content"
					style="margin: 0; padding: 0; border-width: 0px; height: 0px; background: #fff;">
					<div class="modal-body " id="popshow"
						style="margin: 0; padding: 0; background: #fff;">
						<div id="popshowcont"
							style="margin: 0; padding: 0; background: #fff;">
							<div id="gedit" style="margin: 0; padding: 0; background: #fff;">
								<div id="editgedit"
									style="position: absolute; background: #fff; display: none; &amp;#9; left: 0; &amp;#9; top: 0; width: 0; &amp;#9; height: 0; z-index: 100;">
									<iframe name="editsubgedit" src="/a.html" scrolling="no"
										style="width: 0; height: 0; border: 0;"></iframe>
								</div>
								<form name="formedit_gedit" class="form-horizontal"
									action="/system/editok.xt" enctype="multipart/form-data"
									method="POST" target="editsubgedit" novalidate=""
									autocomplete="off" style="background: #fff;">
									<input name="mdb" type="hidden"
										value="229789c5a8df3182ad7757f6dc6c7eec"><input
										name="comname" type="hidden" value="gedit"><input
										name="db" type="hidden" value="gathering"><input
										name="retjava" type="hidden"
										value="b7gsTKoUGZph2X0lGZld2Xkx2biVnLw9GdgsTKoUGdhRGc1JGZu92XrNWasN2X0lGZldmLw9Gd"><input
										name="type" type="hidden" value="insert"><input
										name="dt_gathering_id" type="hidden" value=""><input
										name="dt_gathering_route" type="hidden" value=""><input
										name="dt_gathering_money_type" type="hidden" value="RMB"><input
										name="dt_gathering_prj_id" type="hidden" value="0"><input
										name="dt_gathering_co_id" type="hidden" value="169"><input
										name="dt_gathering__co_id" type="hidden" value="169"><input
										name="dt_gathering_money_rate" type="hidden" value="100"><input
										name="dt_gathering_cu_id" type="hidden" value="107">
									<div style="background: #fff;"
										class="portlet form-horizontal border-n">
										<div style="background: #fff;"
											class="portlet-heading portlet-default">
											<div style="background: #fff;" class="pull-right  f-s-12">

												<!--<span class="button_close_qshow"><button type="button" class="btn btn-white waves-effect waves-light" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close m-r-5"></i>关闭</button></span>-->
												<button name="B0"
													class="btn btn-white waves-effect waves-light"
													type="submit">
													<i class="fa fa-check m-r-5"></i><span set-lan="html:保存">保存</span>
												</button>
											</div>
											<h4 class="modal-title text-dark">
												<span set-lan="html:计划回款/应收表">计划回款/应收表</span>

											</h4>
											<hr class="border-t-a">

										</div>

										<el-form :model="ruleForm" :rules="rules" ref="ruleForm"
											class="demo-ruleForm" style="padding-left: 25px;">
										<div class="gedit_scroll_content">
											<div class="panel-collapse collapse in" id="bg-default">
												<div class="portlet-body p-t-0 p-r-7 BODY_EDIT_SHOW_BOX"
													style="background: #fff;">
													<div class="row">
														<div class="col-md-12">
															<div class="form-group ">

																<!--客户回显-->
																<el-row :gutter="20"> <el-col :span="4">
																<div
																	style="vertical-align: middle; margin-bottom: 0; text-align: right; line-height: 40px; height: 40px;">客户:</div>
																</el-col> <el-col :span="17"> <el-form-item
																	prop="costomers"> <el-input
																	v-model="ruleForm.costomers" disabled :span="16"
																	placeholder="请输入内容"></el-input> </el-form-item> </el-col> </el-row>

															</div>
														</div>
													</div>
													<div class="row">
														<div class="col-md-12">
															<div class="form-group ">

																<!--订单-->

																<el-row :gutter="20"> <el-col :span="4">
																<div
																	style="vertical-align: middle; margin-bottom: 0; text-align: right; line-height: 40px; height: 40px;">合同/订单:</div>
																</el-col> <el-col :span="17"> <el-form-item
																	prop="orders"> <el-input
																	v-model="ruleForm.orders" disabled :span="16"
																	placeholder=""></el-input> </el-form-item> </el-col> </el-row>
																<!--订单-->

															</div>
														</div>
													</div>

													<div class="row">
														<div class="col-md-12">
															<div class="form-group ">

																<!--日期和期次-->

																<el-row :gutter="20"> <!--付款方式--> <!--发货日期--> <el-col
																	:span="4">
																<div
																	style="vertical-align: middle; margin-bottom: 0; text-align: right; line-height: 40px; height: 40px;">计划日期:</div>
																</el-col> <el-col :span="6"> <!--<el-input v-model="orderid" :span="16" placeholder="请输入内容"></el-input>-->
																<el-form-item prop="havetime"> <el-date-picker
																	v-model="ruleForm.havetime" type="date"
																	placeholder="选择日期" style="width: 200px;"  :picker-options="pickerOptions0">
																</el-date-picker> </el-form-item> </el-col> <!--对应期次--> <el-col :span="4">
																<div
																	style="vertical-align: middle; margin-bottom: 0; text-align: right; line-height: 40px; height: 40px;">期次:</div>
																</el-col> <el-col :span="6"> <el-form-item prop="period">
																<el-input v-model="ruleForm.period" disabled :span="16"
																	placeholder="" style="width: 200px;"></el-input> </el-form-item> </el-col> </el-row>
																<!--客户回显-->

															</div>
														</div>
													</div>

													<div class="row">
														<div class="col-md-12">
															<div class="form-group ">

																<!--金额百分比和金额-->

																<el-row :gutter="20"> <el-col :span="4">
																<div
																	style="vertical-align: middle; margin-bottom: 0; text-align: right; line-height: 40px; height: 40px;">百分比:</div>
																</el-col> <el-col :span="6"> <!--<el-input v-model="orderid" :span="16" placeholder="请输入内容"></el-input>-->
																<el-form-item prop="percentage"> <el-select
																	v-model="ruleForm.percentage" placeholder="请选择"
																	style="width: 200px;" @change="doMoney"> <el-option
																	v-for="item in percentage" :key="item.baif"
																	:label="item.baif" :value="item.baif"> </el-option> </el-select> <!--<el-select v-model="ruleForm.vpercentage" placeholder="请选择" style="width: 220px;">
																						<el-option v-for="item in percentage" :key="item.age" :label="item.name" :value="item.age">
																						</el-option>
																					</el-select>--> </el-form-item> </el-col> <!--金额--> <el-col :span="4">
																<div
																	style="vertical-align: middle; margin-bottom: 0; text-align: right; line-height: 40px; height: 40px;">金额:</div>
																</el-col> <el-col :span="6"> <el-input
																	v-model="ruleForm.money" disabled :span="16"
																	placeholder="" style="width: 200px;"></el-input> </el-col> </el-row>
																<!--金额百分比和金额-->

															</div>
														</div>
													</div>

													<div class="row">
														<div class="col-md-12">
															<div class="form-group ">

																<!--是否已回款-->
																<el-row :gutter="20"> <el-col :span="4">
																<div
																	style="vertical-align: middle; margin-bottom: 0; text-align: right; line-height: 40px; height: 40px;">是否回款:</div>
																</el-col> <el-col :span="15"> <el-radio-group
																	v-model="ruleForm.status"
																	style="line-height: 40px;height: 40px;">
																<el-radio :label="0">未回款</el-radio> <el-radio :label="1">已回款</el-radio>
																</el-radio-group> </el-col> </el-row>
																<!--是否已回款-->

															</div>
														</div>
													</div>

													<div class="row">
														<div class="col-md-12">
															<div class="form-group ">

																<!--备注-->
																<el-row :gutter="20"> <el-col :span="4">
																<div
																	style="vertical-align: middle; margin-bottom: 0; text-align: right; line-height: 40px; height: 40px;">备注:</div>
																</el-col> <el-col :span="15"> <el-input type="textarea"
																	:autosize="{ minRows: 2, maxRows: 4}"
																	placeholder="请输入内容" v-model="ruleForm.deschui"
																	style="width: 510px;margin: 0 auto;"> </el-input> </el-col> </el-row>
																<!--备注-->

															</div>
														</div>
													</div>

													<div class="row">
														<div class="col-md-12">
															<div class="form-group ">

																<!--员工-->

																<el-row :gutter="20"> <el-col :span="4">
																<div
																	style="vertical-align: middle; margin-bottom: 0; text-align: right; line-height: 40px; height: 40px;">负责人:</div>
																</el-col> <el-col :span="17"> <el-form-item prop="user">
																<el-select v-model="ruleForm.user" placeholder="请选择"
																	style="width: 510px;"> <el-option
																	v-for="item in user" :key="item.value"
																	:label="item.label" :value="item.value"> </el-option> </el-select>
																</el-form-item> </el-col> </el-row>
																<!--员工-->

															</div>
														</div>
													</div>

												</div>
											</div>
										</div>
										<div class="text-right p-20">

											<!--<span class="button_close_qshow"><button type="button" class="btn btn-white waves-effect waves-light" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close m-r-5"></i>关闭</button></span>-->
											<button name="B0"
												class="btn btn-white waves-effect waves-light" type="button"
												@click="submitForm('ruleForm')">
												<i class="fa fa-check m-r-5"></i><span set-lan="html:保存">保存</span>
											</button>
										</div>
										</el-form>

									</div>
									<div class="text-center" id="qshow_modal_footer">
										<input name="B0" type="hidden" value="保存">

										<!--UTF8-->
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<script type="text/javascript">
			var vm = new Vue({
				el: ".boxhuikuan",
				data: { 
					pickerOptions0: {
			          disabledDate(time) {
			              return time.getTime() < Date.now() - 8.64e7;
			            }
			          }, 
					sumMoney:"",
					percentage: [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}],
					user: [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}],

					ruleForm: {
						/*备注*/
						deschui: "",
						/*状态*/
						status:0,
						/*客戶*/
						costomers: "",
						cid:"",
						/*订单*/
						orders: "",
						oid:"",
						/*计划日期*/
						havetime: "",
						/*期次*/
						period: "",
						/*百分比*/
						percentage: "",
						/*金额*/
						money: "",
						/*用户*/
						user: "",
						endf:0

					},
					rules: {
						//数据源model
						costomers: [
							//非空验证
							{
								required: true,
								message: '请输入客户',
								trigger: 'blur'
							}/* ,
							//长度验证
							{
								min: 3,
								max: 20,
								message: '长度在 3 到 20个字符',
								trigger: 'blur'
							} */
						],
						orders: [{
							required: true,
							message: '订单为空',
							trigger: 'blur'
						}],
						percentage: [{
							required: true,
							message: '请选择百分比',
							trigger: 'change'
						}],
						paytypes: [{
							required: true,
							message: '回款金额不能为空',
							trigger: 'change'
						}],
						havetime: [
							//数据类型要是date
							{
								type: 'date',
								required: true,
								message: '请选择日期',
								trigger: 'change'
							}
						],
						user: [
							//数据类型要是date
							{
								required: true,
								message: '所选人不能为空',
								trigger: 'change'
							}
						]
					}

				},
				methods: {
					doMoney(){
						//alert(this.ruleForm.percentage);
						var per=this.ruleForm.percentage/100;
				        console.log(per);
				        console.log(this.sumMoney);
				        console.log(per*this.sumMoney);
						this.ruleForm.money=per*this.sumMoney;
					},
					open2() {
						//alert(this.ruleForm.endf);
				    	var sse = this;
				        this.$confirm("您的回款计划百分比还剩"+(sse.ruleForm.endf-sse.ruleForm.percentage)+"%，请继续添加..", "提示", {
				          confirmButtonText: '确定',
				          cancelButtonText: '返回主页',
				          type: 'warning'
				        }).then(() => {
				          this.$message({
				            type: 'success',
				            message: '继续添加回款计划..'
				          });
				          window.parent.location.href='shozhongordertwo2?oid='+sse.ruleForm.oid;
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '开始返回订单主页！'
				          });    
				          window.parent.location.href='createOrder';
				        });
				      },
					submitForm(formName) {
				    	  var sse = this;
							//验证方法
							this.$refs[formName].validate((valid) => {
								if(valid) {
									//post提交数据
									axios.post("/addBackMoney",
										//参数转换
										Qs.stringify(this.ruleForm, {
											arrayFormat: 'brackets'
										})
										
									).then(function(v) {
										
										if (sse.ruleForm.endf-sse.ruleForm.percentage!=0) {
											sse.open2();
										}else{

									          window.parent.location.href='shozhongordertwo2?oid='+sse.ruleForm.oid;
										}
										
										
									}).catch(function(e) {
										alert("出错了"+e);
									});

								} else {
									console.log('error submit!!');
									return false;
								}
							});
					}
				},
				mounted() {
					//this.restaurants = this.loadAll();
					
					var backText = ${backText};
					this.user=backText.backMan;
					this.percentage=backText.baifItem;
					this.sumMoney=backText.orderText.o_summoney;
					this.ruleForm.cid=backText.orderText.cus_id;
					this.ruleForm.oid=backText.orderText.o_id;
					this.ruleForm.costomers=backText.orderText.cus_name;
					this.ruleForm.orders=backText.orderText.otitle;
					this.ruleForm.period=backText.period;
					this.ruleForm.endf=backText.endf;
					//alert(backText.endf);

				}

			});
		</script>

</body>

</html>